<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery常用技巧</title>
    <link href="../css/bootstrap-3.3.6.min.css" rel="stylesheet">
    <script src="../js/jquery-2.2.0.js"></script>

    <style>
        body {
            font-family: 微软雅黑;
            font-size: 1.6em;
            background: #aad3ff;
        }
        a, .glyphicon {
            cursor: pointer;
            margin-right: 5px;
        }
        h3{
            text-align: center;
        }
        .list-group-item span{
            margin-right: 10px;
        }
        pre{
            display: none;
        }
        pre:before{
            content: "详细代码如下：";
        }
        a.mp3{
            background: url(ico_mp3.png) no-repeat ;
            color: #0d9905;
            background-size: auto 100%;
        }
        a.zip{
            background: url(ico_zip.png) no-repeat ;
            color: #0030db;
            background-size: auto 100%;
        }
        a.pdf{
            background: url(ico_pdf.png) no-repeat ;
            color: #c88b00;
            background-size: auto 100%;
        }
        a{
            display: inline-block;
            padding-left: 48px;
            line-height: 3em;
            font-weight: 600;
        }
    </style>
</head>
<body>
<div class="container">
    <br>
    <h1>jQuery常用技巧</h1>
    <hr>
    <br>
    <h3>jQuery常用技巧若干</h3>
    <br>
    <div class="row" >
            <div class="col-md-8 col-md-offset-2 list-group" id="list">
                <div><span>1</span>禁用页面右键菜单</div>
                <div><span>2</span>点击测试按钮后原来的链接将在新窗口打开页面： <a href="http://e-art.taobao.com"> 测试连接是我的淘宝店</a></div>
                <div><span>3</span>检测浏览器类型及版本,jquery1.9已经废弃此方法，可通过js判断，但也没找到更合适的代码</div>
                <div><span>4</span>输入框文字获取和失去焦点（前面做过相关练习，此处省略）</div>
                <div><span>5</span>返回头部滑动动画</div>
                <div><span>6</span>获取鼠标位置（前面做过相关练习，此处省略）</div>
                <div><span>7</span>判断元素是否存在（上一课做过相关练习，此处省略）</div>
                <div><span>8</span>点击这个div也可以跳转: <a href="http://e-art.taobao.com"> 测试连接是我的淘宝店</a></div>
                <div><span>9</span>根据浏览器大小改变样式,从宽到窄背景颜色分别为黄、绿、蓝</div>
                <div><span>10</span>设置div显示在屏幕中央（聊天室实例的ajax加载进度条既是，虽然实现代码不同，此处省略）</div>

                <div><span>11</span>创建自定义选择器（前面练习插件时已做，但不成功，此处省略）</div>
                <div><span>12</span>关闭所有动画,点击后可以观察第5个返回头部的动画效果</div>
                <div><span>13</span>检测按下了鼠标哪个键</div>
                <div><span>14</span>回车提交表单<div class="form-group">用户名：<input></div>发现如果在form内会强行跳转。这里的按钮无效</div>
                <div><span>15</span>聊天室案例中的ajax进度条既是（此处省略）</div>
                <div><span>16</span>获取选中的下拉框
                    <label for="select">请选择一位皇帝：</label>
                    <select multiple class="btn btn-default" id="select">
                        <option>朱元璋 </option>
                        <option>朱允炆 </option>
                        <option>朱棣 </option>
                        <option>朱高炽 </option>
                        <option>朱瞻基 </option>
                        <option>朱祁钰 </option>
                        <option>朱祁镇 </option>
                    </select>
                </div>
                <div><span>17</span>切换复选框状态
                    <input type="checkbox">阴
                    <input type="checkbox">阳
                    <input type="checkbox">都不是
                </div>
                <div><span>18</span>用siblings()选取同辈元素，在第一章中做过，此处省略</div>
                <div><span>19</span>个性化链接
                    <a href="demo.mp3">这是模拟mp3文件</a>
                    <a href="demo.zip">这是模拟zip文件</a>
                    <a href="demo.pdf">这是模拟pdf文件</a>
                </div>
                <div><span>20</span>定时动画<div style="background-color: #d2f2df;border: dashed 2px #b16985;height: 100px;margin:auto 20%"></div></div>
                <div><span>21</span>通过扩展.log()方法来显示浏览器log,需要在控制台中查看结果
                    <div style="background-color: #edf2d0;border: double 3px #b10d00;height: 80px;margin:3% 30%">我的信息被打印在控制台里面了，需要查看请按<code>F12</code></div>
                </div>
                <div><span>22</span>使用on()给元素绑定事件，无论静态还是动态生成的。此案例在前面表格变色插件中做过，此处省略。</div>
                <div><span>23</span>省略。</div>
                <div><span>24</span>使用proxy()强制让按钮事件的this指向之前的对象
                    <div hidden class="demo" style="background-color: #cae0f2;border: groove 8px #8d46b1;height: 80px;margin:3% 30%;">
                        <button class="btn btn-danger btn-sm" style="margin: 10px">淡出</button>
                    </div>
                </div>
                <div><span>25</span>限制textarea的输入字数，此例和书上不同，采用更简单的方法：<br>
                    <textarea></textarea><div id="tip"></div>
                </div>
                <div><span>26</span>本地存储，到html5中在详细学习，此处省略</div>
                <div><span>27</span>在解析Json数据时报错“parseError”，则需注意json中的键值对分别都要加上引号。代码此处省略</div>
                <div><span>28</span>牵涉到很多正则表达式，后面专题学习。此处省略</div>
                <div><span>29</span>牵涉到很多正则表达式，后面专题学习。此处省略</div>
                <div><span>30</span>新增一条，以上条目中如果文本中包含“此处省略”文字，则此条记录背景变色，并删除里面的测试按钮</div>
            </div>
    </div>
    <div style="height: 500px"></div><!---->
</div>
<script>
$(function() {
    var $item = $("#list>div");
    var count = 1;
    $item.each(function(){
        $(this).addClass("list-group-item list-group-item-success")
                .append(" <button id='btn_"+count+"' class='btn btn-success btn-sm' style='padding: 2px 6px'>点击测试</button>")
                .children("span").addClass("badge pull-left");
        count++;

    });

    $("#btn_1").click(function(){
        $(document).bind("contextmenu",function(e){
            return false;
        })
    });

    $("#btn_2").click(function(){
        $("a[href^='http://']").attr("target","_blank")
    });

    $("#btn_3").click(function(){
//        if($.support(chrome)){
//            alert($.browser.version)
//        }
        alert(BrowserType());
    });

    $("#btn_5").click(function(){
        $(this).scrollToTop(3000);
    });

    $("#btn_8").parent().click(function(){
        window.location =$(this).find("a").attr("href");
    });

    $("#btn_9").click(function(){
        if($(window).width() > 1200){
            $("body")[0].style.backgroundColor = "yellow";
        }else if($(window).width() > 900){
            $("body")[0].style.backgroundColor = "green";
        }else{
            $("body")[0].style.backgroundColor = "blue";
        }
    });

    $("#btn_12").click(function(){
        $.fx.off = true;
    });

    $("#btn_13").mousedown(function(e){
        var msg = e.which;
        if(msg == 1){
            alert("你按下了左键！");
        }else if(msg == 2){
            alert("你按下了中键！");
        }else{
            alert("你按下了右键！");
        }
    });

    $("#btn_14").parent().find("input").keyup(function(e){
        if(e.which == "13"){
            alert(e.which+"回车提交！");
            return false;
        }
    });

    var count = 16;
    $("#btn_16").click(function(){
        alert($(this).prev().find("option:selected").text())
    });

    var flag = true;
    $("#btn_17").click(function(){
        $(this).parent().find("input").prop("checked",flag);
        flag = !flag;
    });

    $("#btn_19").click(function(){
        $("a[href$=mp3]").addClass("mp3");
        $("a[href$=zip]").addClass("zip");
        $("a[href$=pdf]").addClass("pdf");
    });

    $("#btn_20").click(function(){
        $(this).prev().slideUp(1000).delay(1500).fadeIn(2000);
    });

    $("#btn_21").click(function(){
        ;$.log = $.fn.log = function(msg){

            if (console){
                console.log("%s : %o", msg, this);//此处格式化字符要小写
                return this;
            }
        };
        $(this).prev().log("我的信息");
    });

    $("#btn_23").click(function(){
        $(this).parent().find("div.demo").fadeIn(1200,function(){
            //这样写会让按钮淡出，可以用代理将this指向到上一个对象
            /*                $(this).find("button").click(function(){
             $(this).fadeOut(2000);
             });*/
            $(this).find("button").click($.proxy(function(){
                $(this).fadeOut(2000);
            },this));
        });
    });

    $("#btn_24").parent().find("textarea").keydown(function(){
        var number = $(this).val().length;
        if(number>9){
            alert("您只能输入10个字，超过的会被截掉");
            $(this).val($(this).val().substr(0,10));
            $("#tip").text("您还可以输入0个字")
        }
        $("#tip").text("您还可以输入"+(9-number)+"个字")
    });

    $("#btn_30").click(function(){
        $item.each(function(){
            if($(this).text().indexOf("此处省略")!=-1&&$(this).find("span").text()!=30){
                $(this).addClass("list-group-item-warning").find("button").remove();
            }
        })

    })

});

jQuery.fn.scrollToTop = function(speed){
//    var offest = $(this).offset().top;//前面没有负号就是滑到底部
    var offest = -$(this).offset().top;
    $("html,body").stop().animate({scrollTop:offest},speed);
    return this;

}

/*
 * 描述：判断浏览器信息
 * 编写：LittleQiang_w
 * 日期：2016.1.5
 * 版本：V1.1
 */

//判断当前浏览类型
function BrowserType()
{
    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
    var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器
    var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器
    var isEdge = userAgent.indexOf("Windows NT 6.1; Trident/7.0;") > -1 && !isIE; //判断是否IE的Edge浏览器
    var isFF = userAgent.indexOf("Firefox") > -1; //判断是否Firefox浏览器
    var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1; //判断是否Safari浏览器
    var isChrome = userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1; //判断Chrome浏览器

    if (isIE)
    {
        var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
        reIE.test(userAgent);
        var fIEVersion = parseFloat(RegExp["$1"]);
        if(fIEVersion == 7)
        { return "IE7";}
        else if(fIEVersion == 8)
        { return "IE8";}
        else if(fIEVersion == 9)
        { return "IE9";}
        else if(fIEVersion == 10)
        { return "IE10";}
        else if(fIEVersion == 11)
        { return "IE11";}
        else
        { return "0"}//IE版本过低
    }//isIE end

    if (isFF) {  return "FF";}
    if (isOpera) {  return "Opera";}
    if (isSafari) {  return "Safari";}
    if (isChrome) { return "Chrome";}
    if (isEdge) { return "Edge";}
}//myBrowser() end

//判断是否是IE浏览器
function isIE()
{
    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
    var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器
    if(isIE)
    {
        return "1";
    }
    else
    {
        return "-1";
    }
}


//判断是否是IE浏览器，包括Edge浏览器
function IEVersion()
{
    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
    var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器
    var isEdge = userAgent.indexOf("Windows NT 6.1; Trident/7.0;") > -1 && !isIE; //判断是否IE的Edge浏览器
    if(isIE)
    {
        var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
        reIE.test(userAgent);
        var fIEVersion = parseFloat(RegExp["$1"]);
        if(fIEVersion == 7)
        { return "IE7";}
        else if(fIEVersion == 8)
        { return "IE8";}
        else if(fIEVersion == 9)
        { return "IE9";}
        else if(fIEVersion == 10)
        { return "IE10";}
        else if(fIEVersion == 11)
        { return "IE11";}
        else
        { return "0"}//IE版本过低
    }
    else if(isEdge)
    {
        return "Edge";
    }
    else
    {
        return "-1";//非IE
    }
}



</script>
<!--<div style="background: rgba(164, 255, 169, 0.34)">.</div>-->
</body>
</html>